<template>
  <div>
    <el-select
      v-model="value"
      placeholder="互联网/IT"
      v-on:change="indexSelect"
    >
      <el-option
        v-for="item in li"
        :key="item.value"
        :label="item.job"
        :value="item.ID"
      >
      </el-option>
    </el-select>

    <el-table style="width: 100%" :data="table" max-height="698" align="center">
      <el-table-column prop="ID" label="编号" width="150"> </el-table-column>
      <el-table-column prop="job" label="职业"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary">编辑</el-button>
          <el-button
            type="danger"
            @click.native.prevent="deleteRow(scope.$index, table)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      layout="prev, pager, next"
      :total="this.tableData.length"
      @current-change="change"
      :current-page.sync="currentPage"
    >
    </el-pagination>
  </div>
</template>

<script>
import { job_dev, job_all } from "@/api/api.js";
export default {
  //数据
  data() {
    return {
      li: [],
      value: "",
      tableData: [],
      table: [],
      currentPage: 1,
    };
  },
  //创建完毕
  created() {},
  //挂载完成
  mounted: function () {
    job_all().then((response) => {
      this.li = response.data.data.type;
      var arr = [];
      arr = response.data.data.type[0].children;
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].code == 1) {
          this.tableData.push(arr[i]);
        }
      }
      arr = undefined;
      this.table = this.tableData.slice(0, 10);
    });
  },
  //更新前
  beforeUpdate: function () {},
  //更新完成
  undated: function () {},
  //事件方法
  methods: {
    //分类
    indexSelect(index) {
      this.currentPage = 1;
      job_all().then((response) => {
        var arr = response.data.data.type[this.value - 1].children;
        this.tableData = [];
        for (let i = 0; i < arr.length; i++) {
          if (arr[i].code == 1) {
            this.tableData.push(arr[i]);
          }
        }         
        arr = undefined;
        this.table = this.tableData.slice(0, 10);
      });
    },
    //删除                
    deleteRow(index, rows) {
      let page = this.currentPage * 10;
      job_dev({
        id: this.table[index].ID,
      }).then(function (response) {
        // location.reload();
        // console.log(this.tableData);
        rows.splice(index, 1);
      });
      this.tableData.splice(page - 10 + index, 1);
      this.table = this.tableData.slice(page - 10, page);
    },
    //分页
    change(val) {
      let page = val * 10;
      this.table = this.tableData.slice(page - 10, page);
    },
  },
};
</script>
<style scoped>
div {
  text-align: left;
}
select {
  width: 200px;
  height: 40px;
  margin-bottom: 20px;
  margin-left: 30px;
  outline: medium;
}
</style>